Visualizations
All Fatal Encounters
Use search bar to filter the bar chart and map below.
import {us} from "@observablehq/us-geographic-data"
countiesFile = FileAttachment("ca_counties_geoverview.json").json()
counties = topojson.feature(countiesFile, countiesFile.objects.counties)
states = topojson.feature(us, us.objects.states)ca_only_tidy = transpose(fe_data).map(p => ({
'name': p.Name,
'Latitude': p['Latitude'],
'Longitude': p['Longitude'],
'Year': new Date(p[' Date of injury resulting in death (month/day/year)']).getFullYear(),
'Number of Fatal Encounters': 1,
'race': p['Race with imputations'],
'lea': p['Agency or agencies involved']}));viewof fe_ca_search = Inputs.search(ca_only_tidy,
{placeholder: "Enter a year, race, or police department name",
width: 900,
})Plot.plot({
width: 688,
height: 688,
projection: ({width, height}) => d3
.geoMercator()
.center([-119, 37.4])
.scale((1 << 18) / (28 * Math.PI))
.translate([320, 320]),
marks: [
Plot.geo(counties, { strokeOpacity: 0.8 }),
Plot.geo(states, { strokeOpacity: 0.3 }),
Plot.dot(fe_ca_search, {
x: "Longitude",
y: "Latitude",
// r: "Total_MW",
fill: "yellow",
fillOpacity: 0.6,
stroke: "orange",
title: (d) => `Name: ${d.name}\nYear: ${d.Year}\nLaw Enforcement Agency Involved: ${d.lea}`,
// href: (d) => d.properties['Agency or agencies involved'],
target: "_blank"
})
]
})Wikidata Fatal Encounters
viewof gender = Inputs.checkbox(
["Female", "Male", "Transgender", "Trans Woman"],
{
"label": "Gender",
"value": ["Female", "Male", "Transgender", "Trans Woman"],
}
)viewof race = Inputs.checkbox(
["African American", "Latine", "European-American/White", "Asian/Pacific Islander", "Native American/Alaskan", "Race Unspecified"],
{
"label": "Race/Ethnicity",
"value": ["African American"],
}
)// a function that will return the dataset filtered by whether the PrimSource property is in the list of energy_type values.
filtered = transpose(combineDf).filter(function(person) {
return gender.indexOf(person.sexOrGenderLabel) >= 0 && race.indexOf(person.ethnicGroupLabel) >= 0
})// create a function that returns a consistent color for an energy source
colors = function(source) {
return {
"coal": "darkgray",
"male": "orange",
"female": "green",
"trans": "yellow",
"wind": "palegreen"
}[source]
}// now map using the filtered and colors functions:
Plot.plot({
width: 688,
height: 688,
projection: ({width, height}) => d3
.geoMercator()
.center([-119, 37.4])
.scale((1 << 18) / (28 * Math.PI))
.translate([320, 320]),
marks: [
Plot.geo(counties, { strokeOpacity: 0.8 }),
Plot.geo(states, { strokeOpacity: 0.3 }),
Plot.dot(filtered, {
x: "Longitude",
y: "Latitude",
// r: "Total_MW",
fill: "yellow",
fillOpacity: 0.6,
stroke: "orange",
title: (d) => `Name: ${d.personLabel}`,
// href: (d) => d.properties['Agency or agencies involved'],
target: "_blank"
})
]
})